<template>
    <el-dialog v-model="dialogVisible" title="关联角色" width="60%" :before-close="handleClose">

        <el-checkbox v-for="item in state.list" :key="item.id" :label="item.id"
            :checked="state.hasSelected.indexOf(item.id) !== -1" @change="handleCheck($event, item)" border>
            {{ item.roleName }}
        </el-checkbox>

        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose">取消</el-button>
                <el-button type="primary" @click="submit">
                    提交
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>


<script lang="ts" setup>
import { ref, onMounted, reactive, watch } from 'vue';
import { getRoleList, userRole } from '/@/api/api';
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);

const props = defineProps({
    dialogVisible: {
        type: Boolean,
        default: () => false
    },
    row: {
        type: Object,
        default: () => { },
    },
});

const state = reactive({
    userId: null,
    hasSelected: [], // 用户本身已经选择了的角色
    list: [],
    addRole: [], // 勾选了的角色数组
    deleteRole: [], // 取消勾选的角色数组
});

// 获取角色列表
const RoleList = async () => {
    let par = {
        page: 1,
        size: 99999,
    };
    let { code, data } = await getRoleList(par);
    if (code === 200) {
        state.list = data.list;
    }
}

watch(() => props.dialogVisible, (val) => {
    dialogVisible.value = props.dialogVisible;
    if (dialogVisible.value) {
        RoleList()
    }
    const { id, roleList } = props.row;
    state.userId = id;
    state.hasSelected = arrFiltr(roleList); // 用于存放该用户本身已经勾选了的角色

})

onMounted(() => {
    RoleList();
});



// 筛选出需要的数据
const arrFiltr = (data) => {
    return data.map(ele => {
        return ele.id
    });
}

// 选择
const handleCheck = (value: string | number | boolean, item: any) => {
    if (value) {
        // 新增
        if (state.hasSelected.indexOf(item.id) !== -1) {
            if (state.deleteRole.indexOf(item.id) !== -1) {
                state.deleteRole = state.deleteRole.filter(ele => {
                    return ele !== item.id;
                })
            }
        } else {
            state.addRole.push(item.id);
        }
    } else {
        if (state.addRole.indexOf(item.id) !== -1) {
            state.addRole = state.addRole.filter(ele => {
                return ele !== item.id;
            })
        } else {
            state.deleteRole.push(item.id);
        }
    }
}


const submit = async () => {
    const { id } = props.row;

    let params = {
        userId: id,
        addIds: state.addRole,
        delIds: state.deleteRole
    };

    const { code } = await userRole(params);

    if (code === 200) {
        ElMessage.success('修改成功');
        handleClose();
    }
}


const emit = defineEmits(['userRoleClose']);

function handleClose() {
    emit('userRoleClose');
    state.addRole = [];
    state.deleteRole = [];
    state.hasSelected = [];
    state.list = [];
}

</script>